﻿@*@model string*@
@{
    ViewBag.Title = "登录界面";
    Layout = "../Shared/_Layout.cshtml";
}
@section CssLink{

}

<body class="login-body">

    <div class="container" id="app">

        <form class="form-signin">
            <div class="form-signin-heading text-center">
                <h1 class="sign-title">登录</h1>
                <img src="../../../../Content/backSys/images/login-logo.png" alt="" />
            </div>
            <div class="login-wrap">
                <input id="userName"  v-model="userName" type="text" class="form-control" placeholder="User Name" autofocus>
                <input id="userPass" v-model="userPass" type="password" class="form-control" placeholder="Password">

                <button id="login_btn" class="btn btn-lg btn-login btn-block" type="button"  v-on:click="actionLogin">
                    <i class="fa fa-check"></i>
                </button>

                <div class="registration">
                    还没有账号？
                    <a class="" href="@Url.Action("Registration","Home")">
                        注册
                    </a>
                </div>
                <label class="checkbox">
                    <input id="remember_me" v-model="rememberMe"   type="checkbox" value="remember-me"> 记住我
                    <span class="pull-right">
                        <a data-toggle="modal" href="#myModal"> 忘记密码</a>

                    </span>
                </label>

            </div>

            <!-- Modal -->
            <div aria-hidden="true" aria-labelledby="myModalLabel" role="dialog" tabindex="-1" id="myModal" class="modal fade">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                            <h4 class="modal-title">忘记密码？</h4>
                        </div>
                        <div class="modal-body">
                            <p>输入邮箱以重置密码</p>
                            <input type="text" name="email" placeholder="Email" autocomplete="off" class="form-control placeholder-no-fix">

                        </div>
                        <div class="modal-footer">
                            <button data-dismiss="modal" class="btn btn-default" type="button">取消</button>
                            <button class="btn btn-primary" type="button">提交</button>
                        </div>
                    </div>
                </div>
            </div>
            <!-- modal -->

        </form>

    </div>
    <!-- Placed js at the end of the document so the pages load faster -->
    <!-- Placed js at the end of the document so the pages load faster -->
    @section JavascriptLink{
        <script src="../../../../Content/backSys/js/jquery.signalR-2.4.3.min.js"></script>
        <script src="/signalr/hubs" type="text/javascript"></script>
    }
    @section Javascript{
        <script>
            var vm = new Vue({
                el: "#app",
                data: {
                    userName: '',
                    userPass: '',
                    rememberMe:false,
                },
                methods: {
                    loadStatus: function () {
                        ck_rememberMe = removeNull(getCookie('remember_me'));
                        ck_userName = removeNull(getCookie('userName'));
                        ck_userPass = removeNull(getCookie('userPass'));
                        console.log(userPass);
                        if (ck_rememberMe != '') {
                            vm.rememberMe = true;
                            if (ck_userName != '' && ck_userPass != '') {
                                vm.userName = ck_userName;
                                vm.userPass = ck_userPass;

                            }
                        }
                    },
                    showAlert: function () {
                        console.alert('hello vue');
                    },
                    actionLogin: function () {
                        userName = removeNull(vm.userName);
                        userPass = removeNull(vm.userPass);
                          if ($('#remember_me').prop('checked') == true) {
                              console.log("保存");
                              setCookie('userPass', userPass);
                              setCookie('userName', userName);
                              setCookie('remember_me', '1');
                          } else {
                              delCookie('remember_me');
                              delCookie('userPass');
                              delCookie('userName');
                          }

                          if (userName=='') {
                              commonUtil.message("输入错误", "用户名不能为空",  "danger");
                              return false;
                          }
                          if (userPass=='') {
                              commonUtil.message("输入错误", "用户密码不能为空", "danger");
                              return false;
                          }

                          formdata = new FormData();
                          formdata.append("userName", userName);
                          formdata.append("userPass", userPass);
                        axios({
                            method: 'post',
                            url: "@Url.Action("Login","Home")",
                            data: formdata
                        }).then((res => {
                            console.log(res.data);
                            if (JSON.stringify(res.data)   == 1) {
                                            commonUtil.message("验证成功", "即将跳转主页", "success");
                                            window.location.href = "@Url.Action("Index", "Welcome")";
                                            //$('#u42')[0].innerText = '1';

                                        } else {
                                            commonUtil.message("验证失败", "账户名或密码错误", "danger");

                                        }
                        })).catch(error => {
                            alert(error);
                        });

                            @*then((res => {
                                    //console.log(res);
                                    // 将数据赋值到vue实例中的数据属性users；
                                    //app.users = res.data;
                                  //data = JSON.stringify(data);
                                console.log(JSON.stringify(data));
                                        if (data == 'success') {
                                            commonUtil.message("验证成功", "即将跳转主页", "success");
                                            window.location.href = "@Url.Action("Index", "Welcome")";
                                            //$('#u42')[0].innerText = '1';

                                        } else {
                                            commonUtil.message("验证失败", "账户名或密码错误", "danger");
                                            //'#u1404').click();

                                        }
                                }))*@
                              @*$.ajax({
                                url: "/BackSys/Home/Login",
                                type: 'POST',
                                data: formdata,
                                dataType: 'JSON',
                                cache: false,
                                processData: false,
                                contentType: false,
                                success: function (data) {
                                    //data = JSON.stringify(data);
                                    console.log(data);
                                    if (data == 'success') {
                                        commonUtil.message("验证成功", "即将跳转主页", "success");
                                        window.location.href = "@Url.Action("Index", "Welcome")";
                                        //$('#u42')[0].innerText = '1';

                                    } else {
                                        commonUtil.message("验证失败", "账户名或密码错误", "danger");
                                        //'#u1404').click();

                                    }
                                  }

                              });*@


              }
                },
                watch: {
                    userName: {
                        deep: true,
                        handler(obj) {
                            console.log(obj);
                        }
                    },
                    userPass: {
                        deep: true,
                        handler(obj) {
                            console.log(obj);
                        }
                    },
                    rememberMe: {
                        deep: true,
                        handler(obj) {
                            console.log(obj);
                        }
                    }
                },
                created() {
                    $("body").keydown(function () {
                        if (event.which == 13) {
                            console.log(event.keyCode);//FF下调试
                            $('#login_btn').click();
                        }
                    })
                    this.loadStatus();
                    //引用服务端的集线器代理类
                    var chat = $.connection.ChatHub;
                    //定义服务器端调用的客户端SendMessage方法来显示新消息
                    chat.client.Pull = function (message) {
                        ShowMessage(message);
                    };
                    //开始连接服务器
                    $.connection.hub.start().done(function () {
                        chat.server.init();
                        //callReady();
                    });

                    // 初始化加载数据
                    axios({
                        method: "get",
                        url: "@Url.Action("Login","Home")"
                    }).then((res) => {
                        console.log(res);
                        // 将获取数据设置到users属性
                        // 不能使用this，在axios回调函数中表示窗口，不是vue实例
                        app.users = res.data;
                    }).catch(error => {
                        alert(error);
                    });
                }
            });







        </script>

    }
</body> 